<template>
  <div class="set-brand-rate">
    <!-- 设置用户刷卡费率 -->
    <div class="container" v-loading="loading">
      <div class="model-title text-overflow">设置公共费率</div>
      <div class="form-box">
        <div class="filter-box">
          <el-select @change="handleBrandChange" v-model="filter.brandId">
            <el-option v-for="item in brandList" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select>
          <el-select v-model="filter.channelId">
            <el-option
              v-for="item in channelList"
              :key="item.id"
              :value="item.id"
              :label="item.name+'-'+item.channelParams"
            ></el-option>
          </el-select>
          <el-select v-model="filter.type">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
          <el-select v-model="filter.merType">
            <el-option
              v-for="item in merTypeList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
          <el-button @click="queryPublicRate">查询</el-button>
        </div>

        <div class="list-box">
          <div v-if="rateList.length!==0">
            <div class="set-brand-rate1">
              <div style="width:80px">贴牌费率</div>
              <div style="padding:0 20px;">
                <el-input-number v-model="brandRate" :step="0.0001" :min="0" :max="1"></el-input-number>
              </div>
              <el-button @click="handleUpdateBrandRate">修改</el-button>
            </div>
            <table border="0" cellspacing="0">
              <thead>
                <tr>
                  <th>编号</th>
                  <th>角色等级</th>
                  <th>费率</th>
                  <th>提现手续费</th>
                  <th>推荐人分润费率</th>
                  <th>状态</th>
                  <th>修改</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(cell,index) in rateList" :key="index">
                  <td>
                    <span v-html="cell.id"></span>
                  </td>
                  <td>
                    <span v-html="handleGradeShow(cell.userGrade)"></span>
                  </td>
                  <td>
                    <span v-html="cell.rate || '未设置'"></span>
                  </td>
                  <td>
                    <span v-html="cell.extraFee || '未设置'"></span>
                  </td>
                  <td>
                    <span v-html="cell.gradeRate || '未设置'"></span>
                  </td>
                  <td>
                    <span v-html="cell.status==='1'?'开启':'关闭'"></span>
                  </td>
                  <td>
                    <el-button @click="handleUpdateRate(cell)" type="text">修改</el-button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            style="padding:20px;text-align:center;border:1px solid #efefef"
            v-else
          >暂无数据,请选择条件查询对应的费率信息</div>
          <div style="padding:20px;text-align:center;">
            <el-button style="width:100px" type="primary" @click="handleAddRateGrade">新增 +</el-button>
          </div>
        </div>
        <div v-if="!!updateForm&&Object.keys(updateForm).length !== 0" class="update-form">
          <el-form ref="form" :model="updateForm" label-width="180px">
            <el-form-item label="费率">
              <el-input-number
                v-model="updateForm.rate"
                :step="0.0001"
                :min="updateForm.minrate"
                :max="1"
                label="费率配置"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="最小费率">
              <el-input-number
                v-model="updateForm.minrate"
                :step="0.0001"
                :min="0"
                :max="1"
                label="费率配置"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="提现手续费">
              <el-input-number
                v-model="updateForm.extraFee"
                :precision="1"
                :step="1"
                :min="0"
                :max="100"
                label="手续费配置"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="推荐人分润费率">
              <el-input-number
                v-model="updateForm.gradeRate"
                :step="0.0001"
                :min="0"
                :max="1"
                label="分润费率配置"
              ></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">确认修改</el-button>
              <el-button @click="onCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <el-dialog :title="'新增公共费率等级'" :visible.sync="addRateDialog">
      <el-form :model="addForm" label-width="180px">
        <el-form-item label="等级">
          <el-select placeholder="请选择添加的等级" v-model="addForm.grade">
            <el-option
              v-for="item in gradeList"
              :key="item.grade"
              :value="item.grade"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="贴牌费率">
          <el-input-number v-model="brandRate" :step="0.0001" :min="0" :max="1"></el-input-number>
        </el-form-item>
        <el-form-item label="费率">
          <el-input-number v-model="addForm.rate" :step="0.0001" :min="0" :max="1" label="费率配置"></el-input-number>
        </el-form-item>
        <el-form-item label="上游给的渠道最低费率">
          <el-input-number v-model="addForm.minRate" :step="0.0001" :min="0" :max="1" label="费率配置"></el-input-number>
        </el-form-item>
        <el-form-item label="提现手续费">
          <el-input-number
            v-model="addForm.extraFee"
            :precision="1"
            :step="1"
            :min="0"
            :max="100"
            label="手续费配置"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="推荐人分润费率">
          <el-input-number
            v-model="addForm.gradeRate"
            :step="0.0001"
            :min="0"
            :max="1"
            label="分润费率配置"
          ></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handeleConfirmAdd">确认修改</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "set-brand-rate",
  data() {
    return {
      addRateDialog: false,
      brandRate: 0,
      loading: false,
      updateForm: {},
      filter: {
        brandId: null,
        channelId: "",
        type: 1,
        merType: 1
      },
      typeList: [
        { value: 1, label: "交易" }
        // {value:2,label:'代还/提现'},
      ],
      merTypeList: [
        { value: 1, label: "落地商户" },
        { value: 2, label: "线上商户" }
      ],
      addForm: {
        grade: "",
        rate: "",
        minRate: "",
        extraFee: "",
        gradeRate: ""
      },
      gradeList: [],
      brandList: [],
      channelList: [],
      rateList: [
        // {
        //   "id": 2,
        //   "brandId": 407,
        //   "channelId": 1,
        //   "userGrade": 0,
        //   "rate": 0.007,
        //   "minrate": 0.0045,
        //   "extraFee": 1,
        //   "gradeRate": 0.2,
        //   "status": "1",
        //   "payType": 2,
        //   "updateTime": null,
        //   "createTime": 1536568614000
        // }
      ]
    };
  },
  components: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.getBrandList(); // 获取品牌信息
      this.getChannelList(); // 获取通道信息
    },
    handleUpdateRate(cell) {
      this.updateForm = { ...cell };
    },
    handleBrandChange() {
      this.rateList = [];
    },
    onSubmit() {
      this.loading = true;
      const {
        id,
        payType,
        brandId,
        channelId,
        userGrade,
        rate,
        minrate,
        extraFee,
        gradeRate
      } = this.updateForm;
      let url = `user/brand/edit_rate`;
      let params = `id=${id}&type=${payType}&merType=${
        this.filter.merType
      }&brandId=${brandId}&channelId=${channelId}&grade=${userGrade}&rate=${rate}&minrate=${minrate}&extraFee=${extraFee}&gradeRate=${gradeRate}`;
      this.$Http
        .post(url, params)
        .then(res => {
          this.loading = false;
          if (res.data.resp_code === "000000") {
            this.$message.success("修改费率成功！");
            this.queryPublicRate();
          } else {
            this.$notify.info({
              title: "提示",
              message: res.data.resp_message
            });
          }
        })
        .catch(err => {
          this.loading = false;
          this.$notify.error({
            title: "提示",
            message: "修改公共费率失败！"
          });
        });
    },
    onCancel() {
      this.updateForm = {};
    },
    handleGradeShow(grade) {
      for (let index in this.gradeList) {
        if (this.gradeList[index].grade == grade) {
          return this.gradeList[index].name;
        }
      }
      return grade;
    },
    getUserGradeList() {
      const brandId = this.filter.brandId;
      if (brandId === "" || brandId === null) {
        this.message.warning("请先选择贴牌！");
        return;
      }
      const token = sessionStorage.getItem(1);
      let url = `user/thirdlevel/prod/brand/${brandId}/${token}`;
      this.$Http
        .get(url)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.gradeList = res.data.result.tld || [];
          } else {
            this.$notify.info({
              title: "提示",
              message: res.data.resp_message
            });
          }
        })
        .catch(err => {
          this.$notify.error({
            title: "提示",
            message: "获取用户等级信息失败！"
          });
        });
    },
    getBrandList() {
      let url = `user/brand/query/all`;
      this.$Http
        .get(url)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.brandList = res.data.result || [];
            if (res.data.result.length !== 0) {
              this.filter.brandId = res.data.result[0].id;
            }
          } else {
            this.$notify.info({
              title: "提示",
              message: res.data.resp_message
            });
          }
        })
        .catch(err => {
          this.$notify.error({
            title: "提示",
            message: "获取品牌信息失败！"
          });
        });
    },
    getChannelList() {
      let url = `user/channel/query/all`;
      this.$Http
        .post(url, ``)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.channelList = res.data.result || [];
            if (res.data.result.length !== 0) {
              this.filter.channelId = res.data.result[0].id;
            }
          } else {
            this.$notify.info({
              title: "提示",
              message: res.data.resp_message
            });
          }
        })
        .catch(err => {
          this.$notify.error({
            title: "提示",
            message: "获取通道信息失败！"
          });
        });
    },
    queryPublicRate() {
      this.getUserGradeList(); // 获取用户等级信息
      let url = `user/brand/query_rate`;
      let params = [];
      this.onCancel();
      for (let key in this.filter) {
        if (this.filter[key] === null || this.filter[key] === "") {
          this.$message.error("获取公共费率失败！请完善条件！");
          return;
        }
        params.push(`${key}=${this.filter[key]}`);
      }
      params = params.join("&");
      this.$Http
        .post(url, params)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.rateList = res.data.result || [];
            if (res.data.result.length !== 0) {
              this.brandRate = res.data.result[0].brandRate || 0;
            }
          } else {
            this.$message.info(res.resp_message);
          }
        })
        .catch(err => {
          this.$message.error("服务器繁忙！获取公共费率失败！");
        });
    },
    handleAddRateGrade() {
      // 新增费率
      this.addRateDialog = true;
    },
    handeleConfirmAdd() {
      const token = sessionStorage.getItem(1);
      let url = `user/channel/addBrandRate/${token}`;
      let params = { ...this.filter, ...this.addForm };
      params.brandrate = this.brandRate;
      debugger;
      let p = [];
      for (let key in params) {
        if (
          params[key] === null ||
          params[key] === "" ||
          params[key] === undefined
        ) {
          this.$message.error("缺少必要参数！请填写完整！");
          return;
        }
        p.push(`${key}=${params[key]}`);
      }
      params = p.join("&");
      this.$Http
        .post(url, params)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.queryPublicRate();
            this.addRateDialog = false;
            this.$message.success("添加成功！");
          } else {
            this.$message(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message.error("服务器繁忙！");
        });
    },

    handleCancel() {
      this.addRateDialog = false;
    },
    handleUpdateBrandRate() {
      // 贴牌公共费率设置

      const text = `您确认修改贴牌费率为${this.brandRate}吗？`;
      this.$confirm(text, "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(_ => {
        this._submitBrandRate();
      });
    },
    _submitBrandRate() {
      const token = sessionStorage.getItem(1);
      let url = `user/channel/editBrandRate/${token}`;
      if (!this.brandRate) {
        this.$message.error("费率不能为空！");
        return;
      }
      const parmas = `brandId=${this.filter.brandId}&brandRate=${+this
        .brandRate}`;
      this.$Http
        .post(url, parmas)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.$message.success("修改成功！");
            this.queryPublicRate();
          } else {
            this.$message(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message("服务器繁忙");
        });
    }
  }
};
</script>
<style scoped>
.form-box {
  padding: 20px;
}
table {
  background-color: #fff;
  width: 100%;
  font-size: 12px;
  border: 1px solid #efefef;
}
th {
  position: relative;
  word-wrap: normal;
  text-overflow: ellipsis;
  vertical-align: middle;
  border-bottom: 1px solid #ebeef5;
  height: 40px;
}
thead {
  padding: 8px 0;
  color: #909399;
}
tr {
  padding: 8px 0;
}
tr:hover {
  background-color: #f5f7fa;
}
td {
  border: none;
  border-bottom: 1px solid #ebeef5;
  text-align: center;
}
.list-box {
  padding: 20px;
}
.update-form {
  padding: 20px;
  border: 1px solid #efefef;
}
.set-brand-rate1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid #e6e6e6;
}
</style>